<template>
	<div class="edu-page-warp">
		<el-card shadow="never">
			<div style="margin-top:10px">
				<div
					class="edu-page-title"
					style="margin-bottom: 24px;"
				>{{$t('teachers.approveOpenTeachingTime')}}</div>
				<el-form
					:model="qualificationForm"
					label-position="right"
					label-width="80px"
					:rules="rules"
					ref="qualificationForm"
					label-suffix=":"
				>
					<el-row>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.startWeeks')" class="form-item" prop="startWeek">
								<el-select v-model="qualificationForm.startWeek" style="width: 80%">
									<el-option v-for="item in week" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<!-- <el-input v-model="qualificationForm.startWeek" :placeholder="$t('common.pla.pleaseInput')" style="width: 80%"></el-input> -->
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.startWeek')" class="form-item" prop="startDay">
								<el-select v-model="qualificationForm.startDay" style="width: 80%">
									<el-option v-for="item in weeks" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.startTime')" class="form-item" prop="startTime">
								<el-time-select
									v-model="qualificationForm.startTime"
									:picker-options="pickerOptions"
									style="width: 80%"
									:placeholder="$t('professions.plsChooseDate')"
								></el-time-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.endWeeks')" class="form-item" prop="endWeek">
								<el-select v-model="qualificationForm.endWeek" style="width: 80%">
									<el-option v-for="item in week" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<!-- <el-input v-model="qualificationForm.endWeek" :placeholder="$t('common.pla.pleaseInput')" maxlength="5" style="width: 80%"></el-input> -->
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.endWeek')" class="form-item" prop="endDay">
								<el-select v-model="qualificationForm.endDay" style="width: 80%">
									<el-option v-for="item in weeks" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.endTime')" class="form-item" prop="endTime">
								<el-time-select
									v-model="qualificationForm.endTime"
									:picker-options="pickerOptions"
									:placeholder="$t('professions.plsChooseDate')"
									style="width: 80%"
								></el-time-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div>
				<div
					class="edu-page-title"
					style="margin-top: 24px;margin-bottom: 24px;"
				>{{$t('teachers.openApplicationTime')}}</div>
				<el-form
					:model="applyForm"
					label-position="left"
					label-width="80px"
					:rules="rules"
					ref="applyForm"
					label-suffix=":"
				>
					<el-row>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.startWeeks')" class="form-item" prop="startWeek">
								<el-select v-model="applyForm.startWeek" style="width: 80%">
									<el-option v-for="item in week" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<!-- <el-input v-model="applyForm.startWeek" maxlength="5" :placeholder="$t('common.pla.pleaseInput')" style="width: 80%"></el-input> -->
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.startWeek')" class="form-item" prop="startDay">
								<el-select v-model="applyForm.startDay" style="width: 80%">
									<el-option v-for="item in weeks" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.startTime')" class="form-item" prop="startTime">
								<el-time-select
									v-model="applyForm.startTime"
									:picker-options="pickerOptions"
									:placeholder="$t('professions.plsChooseDate')"
									style="width: 80%"
								></el-time-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.endWeeks')" class="form-item" prop="endWeek">
								<el-select v-model="applyForm.endWeek" style="width: 80%">
									<el-option v-for="item in week" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<!-- 	<el-input v-model="applyForm.endWeek" :placeholder="$t('common.pla.pleaseInput')" maxlength="5" style="width: 80%"></el-input> -->
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.endWeek')" class="form-item" prop="endDay">
								<el-select v-model="applyForm.endDay" style="width: 80%">
									<el-option v-for="item in weeks" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('teachers.endTime')" class="form-item" prop="endTime">
								<el-time-select
									v-model="applyForm.endTime"
									:picker-options="pickerOptions"
									:placeholder="$t('professions.plsChooseDate')"
									style="width: 80%"
								></el-time-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div>
				<div class="upload-label">{{$t('teachers.teacherApplyModel')}}：</div>
				<div class="approve-upload-teacher">
					<el-upload
						ref="myUpload"
						:before-upload="beforeAvatarUpload"
						:before-remove="beforeRemove"
						:headers="{'X-Token': $store.state.session.sessionid}"
						:data="{bucketname: 'face', folderpath: 'file'}"
						:on-success="handleAvatarSuccess"
						class="upload-demo"
						action="/api/commonservice/obsfile/uploadFileTeacherManagementSettings"
						multiple="true"
						limit="2"
						:file-list="fileList"
						:accept="'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'"
					>
						<el-button size="small" type="primary">{{$t('common.btn.clickUpload')}}</el-button>
						<div
							slot="tip"
							class="el-upload__tip"
						>{{this.$t("common.upload.uploadWORDFileOnly")}}{{$t("common.upload.sizeLimit1M")}}</div>
					</el-upload>
				</div>
			</div>
			<div class="float-right" style="margin-top: 16px;margin-bottom: 24px;">
				<el-button @click="cancel">{{$t("message.cancel")}}</el-button>
				<el-button type="primary" @click="save">{{$t("message.save")}}</el-button>
			</div>
		</el-card>
	</div>
</template>
<script>
import {
	statisticsTitle,
	setTime,
	getTime,
	uploadApplyFile,
	getApplyFile
} from "common/src/api/resource/teachers";
export default {
	name: "teacherManageConfig",
	data() {
		return {
			qualificationForm: {
				startWeek: "",
				startDay: "",
				startTime: "",
				endWeek: "",
				endDay: "",
				endTime: ""
			},
			applyForm: {
				startWeek: "",
				startDay: "",
				startTime: "",
				endWeek: "",
				endDay: "",
				endTime: ""
			},
			pickerOptions: {
				start: "00:00",
				step: "01:00",
				end: "23:00"
			},
			week: [],
			weeks: [],
			rawData: [],
			fileList: [],
			rules: {
				startWeek: [
					{
						required: true,
						message: this.$t("teachers.plsChooseStartWeeks"),
						trigger: "blur"
					},
					{ validator: this.weekValidate, trigger: "blur" }
				],
				startDay: [
					{
						required: true,
						message: this.$t("teachers.plsChooseStartWeek"),
						trigger: "blur"
					}
				],
				startTime: [
					{
						required: true,
						message: this.$t("teachers.plsChooseStartTime"),
						trigger: "blur"
					}
				],
				endWeek: [
					{
						required: true,
						message: this.$t("teachers.plsChooseEndWeeks"),
						trigger: "blur"
					},
					{ validator: this.weekValidate, trigger: "blur" }
				],
				endDay: [
					{
						required: true,
						message: this.$t("teachers.plsChooseEndWeek"),
						trigger: "blur"
					}
				],
				endTime: [
					{
						required: true,
						message: this.$t("teachers.plsChooseEndTime"),
						trigger: "blur"
					}
				]
			}
		};
	},
	mounted: function() {
		this.init();
	},
	methods: {
		clearFile() {
			this.$refs.myUpload.clearFiles();
		},
		init() {
			this.weeks.push({ label: this.$t("message.monday"), value: 2 });
			this.weeks.push({ label: this.$t("message.tuesday"), value: 3 });
			this.weeks.push({ label: this.$t("message.wednesday"), value: 4 });
			this.weeks.push({ label: this.$t("message.thursday"), value: 5 });
			this.weeks.push({ label: this.$t("message.friday"), value: 6 });
			this.weeks.push({ label: this.$t("message.saturday"), value: 7 });
			this.weeks.push({ label: this.$t("message.sunday"), value: 1 });
			for(let i=1; i<31; i++){
				this.week.push({ label: i, value: i });
			}
			// this.week.push({ label: 1, value: 1 });
			// this.week.push({ label: 2, value: 2 });
			// this.week.push({ label: 3, value: 3 });
			// this.week.push({ label: 4, value: 4 });
			// this.week.push({ label: 5, value: 5 });
			// this.week.push({ label: 6, value: 6 });
			// this.week.push({ label: 7, value: 7 });
			// this.week.push({ label: 8, value: 8 });
			// this.week.push({ label: 9, value: 9 });
			// this.week.push({ label: 10, value: 10 });
			// this.week.push({ label: 11, value: 11 });
			// this.week.push({ label: 12, value: 12 });
			// this.week.push({ label: 13, value: 13 });
			// this.week.push({ label: 14, value: 14 });
			// this.week.push({ label: 15, value: 15 });
			// this.week.push({ label: 16, value: 16 });
			// this.week.push({ label: 17, value: 17 });
			// this.week.push({ label: 18, value: 18 });
			// this.week.push({ label: 19, value: 19 });
			getTime().then(res => {
				if (res.code == 200) {
					this.rawData = res.data;
					this.initForm();
				}
			});
			this.clearFile();
			getApplyFile().then(res => {
				if (res.code == 200) {
					this.fileList.push({
						name: this.$t("teachers.applicationTemplateForTJ"),
						url: res.data
					});
				}
			});
		},
		initForm() {
			let qualificationStart = this.rawData.find(c => c.type == 1);
			if (qualificationStart) {
				this.qualificationForm.startWeek = qualificationStart.week;
				this.qualificationForm.startDay = qualificationStart.weekDay;
				this.qualificationForm.startTime = qualificationStart.time;
			}
			let qualificationEnd = this.rawData.find(c => c.type == 2);
			if (qualificationEnd) {
				this.qualificationForm.endWeek = qualificationEnd.week;
				this.qualificationForm.endDay = qualificationEnd.weekDay;
				this.qualificationForm.endTime = qualificationEnd.time;
			}

			let applyStart = this.rawData.find(c => c.type == 3);
			if (applyStart) {
				this.applyForm.startWeek = applyStart.week;
				this.applyForm.startDay = applyStart.weekDay;
				this.applyForm.startTime = applyStart.time;
			}
			let applyEnd = this.rawData.find(c => c.type == 4);
			if (applyEnd) {
				this.applyForm.endWeek = applyEnd.week;
				this.applyForm.endDay = applyEnd.weekDay;
				this.applyForm.endTime = applyEnd.time;
			}
		},
		submitTime(data) {
			setTime(data).then(res => {
				if (res.code == 200) {
					this.$message({
						type: "success",
						message: this.$t("message.saveSuccess")
					});
				}
			});
		},
		weekValidate(rule, value, callback) {
			var regPos = /^\d+$/;
			//console.log(value);
			if (regPos.test(value)) {
				if (value > 0 && value < 53) {
					callback();
				} else {
					callback(new Error(this.$t("teachers.weekLimited")));
				}
			} else {
				callback(new Error(this.$t("teachers.mustBeNumber")));
			}
		},
		handleAvatarSuccess(response, file, fileList) {
			if (response.code == 200) {
				let path = file.response.data[fileList[fileList.length-1].name].objectkey;
				fileList[fileList.length-1].name= this.$t("teachers.applicationTemplateForTJ");
				this.fileList=[fileList[fileList.length-1]]
				uploadApplyFile(path).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("common.tips.uploadSuccess")
						});
					} else {
						this.$message({
							type: "error",
							message: res.msg
						});
						this.clearFile();
					}
				});
			} else {
				this.$message({
						type: "error",
						message: response.msg
				});
				this.clearFile();
			}
		},
		save() {
			this.$refs.qualificationForm.validate(valid => {
				this.$refs.applyForm.validate(valid_ => {
					if (!valid_ || !valid) {
						return;
					}
					let data = [];
					data.push({
						type: 1,
						week: this.qualificationForm.startWeek,
						weekDay: this.qualificationForm.startDay,
						time: this.qualificationForm.startTime
					});
					data.push({
						type: 2,
						week: this.qualificationForm.endWeek,
						weekDay: this.qualificationForm.endDay,
						time: this.qualificationForm.endTime
					});
					data.push({
						type: 3,
						week: this.applyForm.startWeek,
						weekDay: this.applyForm.startDay,
						time: this.applyForm.startTime
					});
					data.push({
						type: 4,
						week: this.applyForm.endWeek,
						weekDay: this.applyForm.endDay,
						time: this.applyForm.endTime
					});
					this.submitTime(data);
				});
			});
		},
		cancel() {
			getTime().then(res => {
				if (res.code == 200) {
					this.rawData = res.data;
					this.initForm();
				}
			});
			this.$refs.qualificationForm.clearValidate();
			this.$refs.applyForm.clearValidate();
		},
		beforeRemove(file, fileList) {
			return this.$confirm(
				this.$t("common.upload.remove") + ` ${file.name}？`
			);
		},
		beforeAvatarUpload(file) {
			let extName = file.name
				.substring(file.name.indexOf(".") + 1)
				.toLowerCase()
				.trim();
			if (!(extName === "doc" || extName === "docx")) {
				this.$message({
					type: "error",
					message: this.$t("common.upload.unSupportesFileType")
				});
				this.clearFile();
				return;
			}
			if (!(file.size / 1024 / 1024 < 1)) {
				this.$message({
					type: "error",
					message: this.$t("common.upload.sizeLimit1M")
				});
				this.clearFile();
				return;
			}
		}
	}
};
</script>
<style lang="scss"  >
.sub-title {
	margin: 0 0 20px 0;
}
.upload-label {
	display: inline;
	float: left;
	line-height: 44px;
	margin-right: 8px;
}
.approve-upload-teacher {
	.upload-demo {
		ul {
			display: inline-block;
		}
		.el-upload-list__item-name {
			color: #606266;
			display: block;
			margin-right: 64px;
			overflow: hidden;
			padding-left: 16px;
			line-height: 18px;
			text-overflow: ellipsis;
			-webkit-transition: color 0.3s;
			transition: color 0.3s;
			white-space: nowrap;
		}
	}
}
</style>
